<!-- include a-frame -->
<script src='../vendor/aframe/build/aframe.min.js'></script>

<script src='vendor/a-mmd.js'></script>

<!-- include ar.js for aframe -->
<script src='../../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../../three.js/'</script>
<!-- include shadowonly-plane -->
<script src='../demo-firefox-release/src/aframe-shadow-plane.js'></script>

<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
	<!-- add some info at the top of the page -->
	<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
		<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - A-Frame
                <a href='https://github.com/mrdoob/three.js/tree/dev/examples/models/mmd#readme'>hatsune miku</a> with 
                <a href='https://github.com/takahirox/a-mmd' target="blank">mmd</a>
                by 
                <a href='https://twitter.com/jerome_etienne' target='_blank'>@takahirox</a>
	</div>
	<!-- Define your scene -->
	<a-scene antialias="true" embedded arjs='trackingMethod: best;'>

		<a-entity
			light="type: ambient; color: #333">
		</a-entity>
	
		<!-- Create a anchor to attach your augmented reality -->
		<a-anchor hit-testing-enabled='true' shadow="type: pcfsoft">
                        <a-entity scale='0.08 0.08 0.08' mmd>
				<a-entity
					mmd-model='model : models/miku/miku_v2.pmd; vmd : models/vmds/wavefile_v2.vmd;'
					shadow="cast:true">
				</a-entity>
                        </a-entity>

			<a-entity 
				light="type: directional; color: #888; intensity: 0.9; castShadow:true; shadowCameraVisible: false; shadowMapWidth:2048; shadowMapHeight:2048;" 
				position="-5 20 5">
			</a-entity>
			<!-- add shadow only ground -->
			<a-entity shadowonly-plane='width: 3; height: 3; opacity: 0.4'></a-entity>
                        <!-- <a-plane rotation="-90 0 0"
                                color="#AAAAAA"
                                opacity="0.5"
                                height="15"
                                width="15"
                                shadow="receive:true">
                        </a-plane> -->
	                <!-- <a-circle				
				rotation='-90 0 0'
                                opacity='0.5'
				src='url(../demo-firefox/images/UV_Grid_Sm.jpg)'
				transparency='true'
				radius='1'
				shadow='receive:true'>
			</a-circle> -->
	                <!-- <a-entity				
				rotation='-90 0 0'
                                opacity="0.5"
				src='url(../demo-firefox/images/transparent-texture.png)'
				src='url(../demo-firefox/images/UV_Grid_Sm.jpg)'
				radius="1.5"
				shadow="receive:true">
			</a-entity> -->

		</a-anchor>
		<!-- Define a static camera -->
		<a-camera-static/>
	</a-scene>
</body>
